<template>
	<view class="main">
		<!-- <NavigationBar origin="main" text="书架"></NavigationBar> -->
		<!-- <view class="stack-content" :style="{'marginTop': navHeight + 'rpx'}"> -->
		<view class="stack-content" >
			<view class="stack-search">
				<view class="indexiconn">
					<image src="@/static/icon/search.png" lazy-load></image>
				</view>
				<input type="text" @confirm="search" v-model.trim="keyword" id="indexbtn" placeholder="搜索书名/口令词">
			</view>
		</view>
		<view class="banner">
			<image src="../../static/sack-banner.png"></image>
		</view>
		<view class="book-content">
			<view class="list">
				<view class="list-title">排序</view>
				<view :class="['list-item',item.id===sortIndex?'item-active':'']" v-for="item in sortList"
					:key="item.id" @click="changeSotrIndex(item)">
					{{item.name}}
				</view>
			</view>

			<view class="list">
				<view class="list-title">分类</view>
				<view :class="['list-item',index===classifyIndex?'item-active':'']" v-for="(item,index) in classifyList"
					:key="index" @click="changeClassifyIndex(item,index)">
					{{item}}
				</view>
			</view>

			<view class="stack-title">
				<view class="stack-border"></view>
				<view class="stack-text">昨日销量爆款小说</view>
				<view class="stack-border"></view>
			</view>

			<view class="stack-list">
				<scroll-view v-if="stackList && stackList.length > 0" @scrolltolower="lowerBottom" scroll-y="true"
					class="scrollHeight" :refresher-enabled="true" :refresher-threshold="100"
					:refresher-triggered="triggered" @refresherrefresh="onRefresh">
					<view class="stack-item" v-for="(item,index) in stackList" :kek="item.id" @click="goIntroduction(item)">
						<view class="stack-number">
							{{index >= 9 ? index + 1 : `0${index+1}`}}
						</view>
						<view class="stack-image">
							<u-lazy-load class="image" :image="item.cover_url"></u-lazy-load>
						</view>
						<view class="stack-box">
							<view class="stack-title">{{item.name}}</view>
							<view class="stack-intro">{{item.intro}}</view>
							<view class="stack-tabs">
								<text class="tab" v-for="(el,ind) in item.keyword" :key="ind">
									{{el}}
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>
		</view>
		<MyPopup v-if="show" :content='content' @showshow='showshow'></MyPopup>
	</view>
</template>

<script>
	import NavigationBar from '@/components/navigationBar.vue'
	import {
		open_from
	} from "@/request/open_from.js"
	import {
		Books
	} from "@/request/api.js"
	import MyPopup from "@/components/Popup.vue"
	export default {
		components: {
			MyPopup,
			NavigationBar
		},
		data() {
			return {
				sortList: [{
						id: 1,
						name: '热门推荐'
					},
					{
						id: 2,
						name: '潜力新作'
					}
				],
				classifyList: ['全部', '上新', '现言', '古言', '情感', '都市'],
				sortIndex: 1,
				classifyIndex: 0,
				keyword: '',
				stackList: [],
				triggered: false,
				show: false,
				content: '请输入内容',
				params: {
					page: 1,
					page_size: 5,
					rank_sort: 1,
					rank_category: 0,
				},
				total:0
			}
		},

		onLoad() {
			this.init()
		},

		methods: {
			// 初始化
			async init() {
				const {
					data
				} = await Books.GetChartRanksApi({
					...this.params
				})
				this.stackList = [...this.stackList,...data.data]
				this.total = data.page_info.total
				this.triggered = false
			},

			// 搜索
			async search() {
				if (this.keyword.trim() == '') {
					this.content = '请输入内容'
					this.show = true
					this.keyword = ''
					return
				}
				let res = await Books.Search(this.keyword, 1)
				if (res.data.page_info.total == 0) {
					this.content = '暂无相关书籍，换个关键词试试'
					this.show = true
					this.keyword = ''
				}
				if (res.data.page_info.total != 0) {
					let kldata = res.data
					if (res.data.page_info.search_keyword_id != 0) {
						uni.navigateTo({
							url: `/pages/novel_plugin/index?id=${kldata.data[0].id}&search_keyword_id=${kldata.page_info.search_keyword_id}&chapter_id=${kldata.data[0].chapter_id}`
						})
						this.keyword = ''
					} else {
						let keywordList = encodeURIComponent(JSON.stringify(res.data))
						uni.navigateTo({
							url: `/pages/SearchList/SearchList?keyword=${this.keyword}&keywordList=` +
								keywordList
						})
						this.keyword = ''
					}
				}
			},

			showshow(v) {
				this.show = v
			},

			// 排序
			changeSotrIndex(item) {
				this.sortIndex = item.id
				this.params.rank_sort = item.id
				this.stackList = []
				this.params.page = 1
				this.init()
			},
			
			goIntroduction(item){
				uni.navigateTo({
					url: `/pages/Introduction/Introduction?id=${item.id}`
				})
			},

			// 分类
			changeClassifyIndex(item, index) {
				this.classifyIndex = index
				this.params.rank_category = index
				this.params.page = 1
				this.stackList = []
				this.init()
			},

			// 触底加载
			async lowerBottom() {
				this.params.page++
				if (this.total >= this.params.page * this.params.page_size) {
					this.init()
				}
			},

			onRefresh() {
				if (!this.triggered) {
					this.triggered = true
					this.stackList = []
					this.params.page = 1
					this.init()
				}
			},

		}

	}
</script>

<style lang="less" scoped>
	@import url("./Stack.less");
</style>